<script setup>
import $ from 'jquery'
import { ref, onMounted } from 'vue';
import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
import 'swiper/css';
const onSlideChange = (swiper) => {
  console.log('当前激活的Slide索引:', swiper.realIndex);
};
const activeIndex = ref(-1); // 当前悬浮的索引
// 存储 Swiper 实例
const swiperInstance = ref(null);

// Swiper 初始化完成后触发
const onSwiperInitialized = (swiper) => {
  swiperInstance.value = swiper;
  console.log('Swiper 已初始化', swiper); // 调试用
};


// 轮播索引
const indexSwiper = ref(0)
// 切换到上一组
const slidePrev = () => {
  if (swiperInstance.value) {
    swiperInstance.value.slidePrev();
    indexSwiper.value = swiperInstance.value.realIndex
    console.log('切换到上一组', swiperInstance.value.realIndex); // 调试用
  }
};

// 切换到下一组
const slideNext = () => {
  if (swiperInstance.value) {
    swiperInstance.value.slideNext();
    indexSwiper.value = swiperInstance.value.realIndex
    console.log('切换到下一组', swiperInstance.value.realIndex); // 调试用
  }
};
const handleHover = (index) => {
  console.log("handleHover index ", index)
  console.log("******", $(".case-con .swiper-slide:visible"));

  activeIndex.value = index;
  // debugger
  $(".case-con .swiper-slide").css({
    "flex": "0 0 20%",
    "width": "20%"
  })
  $(".case-con .swiper-slide").eq(index).css({
    "flex": "0 0 40%",
    "width": "40%"
  })
  // swiperInstance.value.slideTo(index); // 确保当前项可见
};

const handleLeave = () => {
  activeIndex.value = -1;
  $(".case-con .swiper-slide").css({
    "flex": "0 0 25%",
    "width": "25%"
  })
};
</script>
<template>
  <div class="project-case">
    <div class="title">Project Case</div>
    <div class="desc">
      Doan equipment applies to road construction and road maintenance, and has provided solutions for
      2000 + customers
    </div>
    <!-- <div class="case-con">
      <div class="item one">
        <div class="text">
          Provide Omni Channel Warehousing For German Electronic Cigarettes
        </div>
        <div class="mask">
          <div class="text-con">
            <div class="title">
              Provide Omni Channel Warehousing For German Electronic Cigarettes
            </div>
            <div class="sub-desc">
              Optimizing warehouse space. Scheduling work shifts. Managing inventory. These are challenges every
              warehouse manager deals with to meet the demands of high-volume fulfillment operations.
            </div>
            <div class="btn">Learn more</div>
          </div>
        </div>
      </div>
      <div class="item two">
        <div class="text">
          Provide Omni Channel Warehousing For German Electronic Cigarettes
        </div>
        <div class="mask">
          <div class="text-con">
            <div class="title">
              Provide Omni Channel Warehousing For German Electronic Cigarettes
            </div>
            <div class="sub-desc">
              Optimizing warehouse space. Scheduling work shifts. Managing inventory. These are challenges every
              warehouse manager deals with to meet the demands of high-volume fulfillment operations.
            </div>
            <div class="btn">Learn more</div>
          </div>
        </div>
      </div>
      <div class="item three">
        <div class="text">
          Provide Omni Channel Warehousing For German Electronic Cigarettes
        </div>
        <div class="mask">
          <div class="text-con">
            <div class="title">
              Provide Omni Channel Warehousing For German Electronic Cigarettes
            </div>
            <div class="sub-desc">
              Optimizing warehouse space. Scheduling work shifts. Managing inventory. These are challenges every
              warehouse manager deals with to meet the demands of high-volume fulfillment operations.
            </div>
            <div class="btn">Learn more</div>
          </div>
        </div>
      </div>
      <div class="item four">
        <div class="text">
          Provide Omni Channel Warehousing For German Electronic Cigarettes
        </div>
        <div class="mask">
          <div class="text-con">
            <div class="title">
              Provide Omni Channel Warehousing For German Electronic Cigarettes
            </div>
            <div class="sub-desc">
              Optimizing warehouse space. Scheduling work shifts. Managing inventory. These are challenges every
              warehouse manager deals with to meet the demands of high-volume fulfillment operations.
            </div>
            <div class="btn">Learn more</div>
          </div>
        </div>
      </div>
    </div> -->
    <swiper class="case-con" ref="swiperRef" :slides-per-view="4" @slideChange="onSlideChange"
      @swiper="onSwiperInitialized">
      <swiper-slide class="item one" @mouseenter="handleHover(0)" @mouseleave="handleLeave"
        :class="{ 'active-slide': activeIndex === 0 }">
        <div class="text">
          Provide Omni Channel Warehousing For German Electronic Cigarettes
        </div>
        <div class="mask">
          <div class="text-con">
            <div class="title">
              Provide Omni Channel Warehousing For German Electronic Cigarettes
            </div>
            <div class="sub-desc">
              Optimizing warehouse space. Scheduling work shifts. Managing inventory. These are challenges every
              warehouse manager deals with to meet the demands of high-volume fulfillment operations.
            </div>
            <div class="btn">Learn more</div>
          </div>
        </div>
      </swiper-slide>
      <swiper-slide class="item two" @mouseenter="handleHover(1)" @mouseleave="handleLeave"
        :class="{ 'active-slide': activeIndex === 1 }">
        <div class="text">
          Provide Omni Channel Warehousing For German Electronic Cigarettes
        </div>
        <div class="mask">
          <div class="text-con">
            <div class="title">
              Provide Omni Channel Warehousing For German Electronic Cigarettes
            </div>
            <div class="sub-desc">
              Optimizing warehouse space. Scheduling work shifts. Managing inventory. These are challenges every
              warehouse manager deals with to meet the demands of high-volume fulfillment operations.
            </div>
            <div class="btn">Learn more</div>
          </div>
        </div>
      </swiper-slide>
      <swiper-slide class="item three" @mouseenter="handleHover(2)" @mouseleave="handleLeave"
        :class="{ 'active-slide': activeIndex === 2 }">
        <div class="text">
          Provide Omni Channel Warehousing For German Electronic Cigarettes
        </div>
        <div class="mask">
          <div class="text-con">
            <div class="title">
              Provide Omni Channel Warehousing For German Electronic Cigarettes
            </div>
            <div class="sub-desc">
              Optimizing warehouse space. Scheduling work shifts. Managing inventory. These are challenges every
              warehouse manager deals with to meet the demands of high-volume fulfillment operations.
            </div>
            <div class="btn">Learn more</div>
          </div>
        </div>
      </swiper-slide>
      <swiper-slide class="item four" @mouseenter="handleHover(3)" @mouseleave="handleLeave"
        :class="{ 'active-slide': activeIndex === 3 }">
        <div class="text">
          Provide Omni Channel Warehousing For German Electronic Cigarettes
        </div>
        <div class="mask">
          <div class="text-con">
            <div class="title">
              Provide Omni Channel Warehousing For German Electronic Cigarettes
            </div>
            <div class="sub-desc">
              Optimizing warehouse space. Scheduling work shifts. Managing inventory. These are challenges every
              warehouse manager deals with to meet the demands of high-volume fulfillment operations.
            </div>
            <div class="btn">Learn more</div>
          </div>
        </div>
      </swiper-slide>
      <swiper-slide class="item five" @mouseenter="handleHover(4)" @mouseleave="handleLeave"
        :class="{ 'active-slide': activeIndex === 4 }">
        <div class="text">
          Provide Omni Channel Warehousing For German Electronic Cigarettes
        </div>
        <div class="mask">
          <div class="text-con">
            <div class="title">
              Provide Omni Channel Warehousing For German Electronic Cigarettes
            </div>
            <div class="sub-desc">
              Optimizing warehouse space. Scheduling work shifts. Managing inventory. These are challenges every
              warehouse manager deals with to meet the demands of high-volume fulfillment operations.
            </div>
            <div class="btn">Learn more</div>
          </div>
        </div>
      </swiper-slide>
    </swiper>
    <div class="btns">
      <div class="prev btn-pub" @click="slidePrev"> < </div>
      <div class="next btn-pub" @click="slideNext"> > </div>
      </div>
    </div>
</template>
<style lang="scss" scoped>
// 老版样式
// .project-case {
//   height: 100%;
//   margin: 0 auto;
//   padding: 81px 0px 121px 0px;

//   .title {
//     font-weight: bold;
//     font-size: 32px;
//     text-align: center;
//     color: #333;
//   }

//   .desc {
//     width: 622px;
//     height: 39px;
//     font-size: 16px;
//     color: #666666;
//     line-height: 22px;
//     text-align: center;
//     margin: 20px auto 0px;
//   }

//   .case-con {
//     width: 100%;
//     height: 422px;
//     display: flex;
//     margin: 40px 0px 0px 0px;
//     background: #ccc;
//     // overflow: hidden;

//     .item {
//       overflow: hidden;
//       // flex: 1;
//       position: relative;
//       transition: all .5s;
//       // flex-shrink: 0;
//       .mask {
//         opacity: 0;
//         width: 100%;
//         height: 100%;
//         border-top: 6px solid #FF77AE;

//         .text-con {
//           width: 538px;
//           padding: 90px 50px 0px 36px;

//           .title {
//             font-weight: bold;
//             font-size: 22px;
//             color: #fff;
//             line-height: 36px;
//             text-align: left;
//           }

//           .sub-desc {
//             color: #fff;
//             font-size: 14px;
//             line-height: 20px;
//             text-align: left;
//             margin: 20px 0px 0px 0px;
//           }

//           .btn {
//             color: #fff;
//             width: 167px;
//             height: 47px;
//             background: #FF7700;
//             border-radius: 2px;
//             display: flex;
//             align-items: center;
//             justify-content: center;
//             cursor: pointer;
//             margin: 52px 0px 0px 0px;
//           }
//         }
//       }

//       &:hover {
//         flex: 1.8;

//         .text {
//           display: none;
//         }

//         .mask {
//           background: linear-gradient(267deg, #8252A2 0%, #5B108E 100%);
//           box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.16);
//           border-radius: 4px 4px 4px 4px;
//           opacity: 0.8;
//         }
//       }
//     }

//     .text {
//       height: 145px;
//       background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.73) 100%);
//       display: flex;
//       align-items: center;
//       text-align: left;
//       font-weight: bold;
//       font-size: 16px;
//       color: #fff;
//       padding: 0px 10px;
//       position: absolute;
//       bottom: 0;
//     }
//   }

//   .one {
//     background: url("@/assets/images/case-one.png") 100% 100% no-repeat;
//     background-size: 100% 100%;
//   }

//   .two {
//     background: url("@/assets/images/case-two.png") 100% 100% no-repeat;
//     background-size: 100% 100%;
//   }

//   .three {
//     background: url("@/assets/images/case-three.png") 100% 100% no-repeat;
//     background-size: 100% 100%;
//   }

//   .four {
//     background: url("@/assets/images/case-four.png") 100% 100% no-repeat;
//     background-size: 100% 100%;
//   }
//   .five {
//     background: url("@/assets/images/case-three.png") 100% 100% no-repeat;
//     background-size: 100% 100%;
//   }
// }
.project-case {
  height: 100%;
  margin: 0 auto;
  padding: 81px 0px 121px 0px;
  position: relative;

  .title {
    font-weight: bold;
    font-size: 32px;
    text-align: center;
    color: #333;
  }

  .desc {
    width: 622px;
    height: 39px;
    font-size: 16px;
    color: #666666;
    line-height: 22px;
    text-align: center;
    margin: 20px auto 40px;
  }

  .swiper {
    height: 422px;
  }

  .swiper-wrapper {
    width: 100%;
    height: 422px;
    display: flex;
    margin: 40px 0px 0px 0px;
    background: #ccc;

    // overflow: hidden;
    .swiper-slide {
      overflow: hidden;
      // flex: 1;
      position: relative;
      transition: all .5s;
      flex: 0 0 25%;
      /* 覆盖flex:1 */
      width: 25%;

      // flex-shrink: 0;
      .mask {
        opacity: 0;
        width: 100%;
        height: 100%;
        border-top: 6px solid #FF77AE;

        .text-con {
          width: 538px;
          padding: 90px 50px 0px 36px;

          .title {
            font-weight: bold;
            font-size: 22px;
            color: #fff;
            line-height: 36px;
            text-align: left;
          }

          .sub-desc {
            color: #fff;
            font-size: 14px;
            line-height: 20px;
            text-align: left;
            margin: 20px 0px 0px 0px;
          }

          .btn {
            color: #fff;
            width: 167px;
            height: 47px;
            background: #FF7700;
            border-radius: 2px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            margin: 52px 0px 0px 0px;
          }
        }
      }

      &.active-slide {

        // flex: 1.8;
        // flex: 0 0 35% !important;
        // /* 覆盖flex:1 */
        // width: 35% !important;
        // flex: 0 0 35% !important;
        // width: 35% !important;
        // z-index: 10;
        /* 确保悬浮项在上层 */
        .text {
          display: none;
        }

        .mask {
          background: linear-gradient(267deg, #8252A2 0%, #5B108E 100%);
          box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.16);
          border-radius: 4px 4px 4px 4px;
          opacity: 0.8;
        }
      }

      // &:not(.active-slide) {
      //   flex: 0 0 25% !important;
      //   width: 25% !important;
      // }
    }

    .text {
      height: 145px;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.73) 100%);
      display: flex;
      align-items: center;
      text-align: left;
      font-weight: bold;
      font-size: 16px;
      color: #fff;
      padding: 0px 10px;
      position: absolute;
      bottom: 0;
    }
  }

  .one {
    background: url("@/assets/images/case-one.png") 100% 100% no-repeat;
    background-size: 100% 100%;
  }

  .two {
    background: url("@/assets/images/case-two.png") 100% 100% no-repeat;
    background-size: 100% 100%;
  }

  .three {
    background: url("@/assets/images/case-three.png") 100% 100% no-repeat;
    background-size: 100% 100%;
  }

  .four {
    background: url("@/assets/images/case-four.png") 100% 100% no-repeat;
    background-size: 100% 100%;
  }

  .five {
    background: url("@/assets/images/case-three.png") 100% 100% no-repeat;
    background-size: 100% 100%;
  }

  .btns {
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 30px;
    display: flex;
    justify-content: center;
    column-gap: 21px;

    .btn-pub {
      width: 50px;
      height: 50px;
      text-align: center;
      line-height: 50px;
      border-radius: 6px;
      border: 1px solid #5B108E;
      color: #5B108E;
      cursor: pointer;
      font-size: 22px;
    }
  }
}

/* 悬浮状态：当前slide变宽，其他变窄 */
// .swiper-slide.active-slide {
//   flex: 0 0 40% !important;
//   width: 40% !important;
//   z-index: 10;
//   /* 确保悬浮项在上层 */
// }

// .swiper-slide:not(.active-slide) {
//   flex: 0 0 20% !important;
//   width: 20% !important;
// }</style>
